<template>
  <div>
    <!-- 这里通过useStore()方法，拿到store,store中包含state.js中的数据 标题栏 -->
    <TopHeader>{{ headerTitle }}</TopHeader>
    <!-- 顶部搜索输入 -->
    <search-input :placeholder="placeholder" :maxlength="maxlength"></search-input>
  </div>
  <!-- 路由出口,展示 router-view 组件 ，也就是不同页面 -->
  <router-view/>
  <!-- 底部导航栏 -->
  <tab-bar></tab-bar>
  
</template>

<script>
// 下面是引入公共组件
// 顶部标题栏
import TopHeader from '@/components/TopHeader'
// 底部导航栏
import TabBar from '@/components/TabBar'
// 导入搜索输入框
import SearchInput from '@/components/SearchInput'

// 下面是导入vuex的函数 用于获取数据
import { useStore } from 'vuex'

// 从vue里面引入函数
// isReactive 判断数据是否是响应式数据
// watch 监听数据变化
import { isReactive,watch } from 'vue'

// 从路由中 引入获取路由数据方法
import { useRouter } from 'vue-router'

export default {
  components: {
    // 注册组件
    // 顶部标题栏
    TopHeader,
    // 底部导航栏
    TabBar,
    // 搜索输入框
    SearchInput
  },

  setup() {
    // 在这里拿到的数据 是响应式数据 可以在模板中直接使用

    // 数据是存放在/src/store/index.js文件中，通过main.js接入到vue应用中，通过useStore方法获取数据
    const store = useStore();
    console.log(store);  // 查看store对象
    console.log(store.state);  // 查看store对象中的state属性

    // 打印导入的路由 对象(包括很多属性及方法)
    const route = useRouter();
    console.log(route);

    // 打印当前路由
    console.log(route.currentRoute.value);

    // 监听路由的变化
    watch(
      // 第一个参数是监听的数据
      () => route.currentRoute.value.name,
      // 第二个参数是监听的数据发生变化后要执行的方法
      (value) => {
        console.log(value);
        // 设置突变
        // 使用store.commit()方法 提交一个名为setHeaderTitle的突变
        store.commit('setHeaderTitle', value);
        store.commit('setPlaceholder', value);
      }
    );

    // 返回数据
    return store.state;
  }
}
</script>

<style lang="less">
// 这里引入的样式，是全局的

// 设置三个页面的共用样式 包括上下留白 和底部导航栏
.container {
    padding-top: 0.82rem;
    padding-bottom: 0.44rem;
    box-sizing: border-box;
    /*这里取值为border-box。在默认的content-box盒模型下，元素的宽度和高度只计算内容区域，边框和内边距会额外增加元素的实际尺寸。而当设置为border-box时，元素的宽度和高度计算会包含边框和内边距，也就是说，无论设置多少内边距和边框宽度，元素的整体尺寸（宽度和高度）在布局中是固定的，不会因为添加内边距或边框而超出原设定的尺寸。*/
} 
</style>
